<template>
  <div class="content">
    <div class="top">
      <img :src="form.goodsImage" mode="scaleToFill" />
      <div class="ellipsis-2">
        <span>{{form.goodsName}}</span>
      </div>
    </div>
    <div class="select">
      <span>退款原因</span>
      <picker @change="bindPickerChange" :value="index" :range="refundList">
        <view class="picker">
          <span>{{pickerLabel}}</span>
          <i-icon class="icon" type="enter" size="16" color="#6e6e6e" />
        </view>
      </picker>
    </div>
    <div class="info">
      <div class="top">
        <span>退款金额</span>
        <p>{{newForm.allAmout}}</p>
      </div>
      <div class="bottom">
        <span>最多{{newForm.amount}}，含发货邮费{{newForm.shippingFee}}</span>
      </div>
    </div>
    <div class="input-box">
      <span>退款说明</span>
      <textarea
        class="input"
        v-model="form.refuseContent"
        placeholder="选填"
        maxlength="-1"
        placeholder-style="color: #9a9a9a;"
      />
    </div>
    <div class="uplode">
      <span>上传凭证</span>
      <!-- <img :src="image1" mode="scaleToFill" /> -->
      <div class="img" v-for="(item, index) in imgList" :key="index">
        <img class="svg" :src="item" mode="scaleToFill" />
      </div>
      <div @click="handleFileClick" v-if="imgList.length < 3">
        <img
          class="svg"
          src="/static/assets/icon/uplode-icon.svg"
          mode="scaleToFill"
        />
      </div>
    </div>
    <button class="btn" @click="stockreFund(item)">提交</button>
  </div>
</template>

<script>
import { CREATE_STOCKRE_FUND, GET_STOCK_SHIPPING_FEE } from '@/api'
import { UPLOAD_IMAGE } from '@/api/new-open-shop'
import { getCurrentPageParams, currencyFormatter } from '@/utils'

export default {
  components: {},
  props: {},
  data () {
    return {
      form: {},
      image1: '',
      submitForm: {},
      refundList: [
        '大小尺寸与描述不符',
        '卖家发错货',
        '七天无理由退换货',
        '尺寸拍错不喜欢',
        '效果不好'
      ],
      index: '',
      pickerLabel: '请选择',
      shippingFee: '',
      imgList: []
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    newForm () {
      return {
        ...this.form,
        amount: currencyFormatter(this.form.amount, 1),
        shippingFee: currencyFormatter(this.form.shippingFee, 1),
        allAmout: `￥ ${(
          (this.form.amount + this.form.shippingFee) *
          1
        ).toFixed(2)}`
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onReady () {
    this.init()
  },
  onShow () {},
  methods: {
    handleFileClick () {
      const vm = this
      vm.$loading.show()
      UPLOAD_IMAGE()
        .then(r => {
          let res = JSON.parse(r.data)
          vm.$loading.close()
          if (res.code === '0') {
            vm.image1 = res.data.imgPath
            vm.imgList.push(res.data.imgPath)
          } else {
            vm.$toast(res.message)
          }
        })
        .catch(e => {
          vm.$loading.close()
          console.error(e)
        })
    },
    bindPickerChange (e) {
      this.index = e.target.value
      this.pickerLabel = this.refundList[Number(this.index)]
    },
    stockreFund () {
      const vm = this
      vm.$dialog('是否确认申请退货', '', '#ef250b').then(() => {
        if (!vm.index) {
          vm.$toast('请选择退款原因')
        }
        console.log(vm.imgList)
        vm._createStockReFund()
      })
    },
    init () {
      const vm = this
      let obj = JSON.parse(getCurrentPageParams('item'))
      vm.form = obj
      console.log(vm.form)
      vm.submitForm = {}
      vm.image1 = ''
      vm.imgList = []
      vm.getStockShippingFee()
    },
    /** api **/
    getStockShippingFee () {
      const vm = this
      let params = [
        {
          goodsNo: vm.form.goodsNo,
          goodsNum: vm.form.goodsNum
        }
      ]
      GET_STOCK_SHIPPING_FEE(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.shippingFee = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    _createStockReFund () {
      const vm = this
      let params = {
        customerId: vm.form.customerId,
        orderNo: vm.form.orderNo,
        providerId: vm.account.providerId,
        reason: vm.pickerLabel,
        // refundId: '',
        shopId: vm.form.shopId,
        state: vm.form.state,
        // tradeNo: '',
        amount: vm.shippingFee,
        remark: vm.form.refuseContent,
        // image1: vm.image1,
        lockAmount: vm.form.lockAmount
      }
      if (vm.imgList.length) {
        if (vm.imgList[0]) {
          params.image1 = vm.imgList[0]
        }
        if (vm.imgList[1]) {
          params.image2 = vm.imgList[1]
        }
        if (vm.imgList[2]) {
          params.image3 = vm.imgList[2]
        }
      }

      CREATE_STOCKRE_FUND(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('申请退货成功', '').then(() => {
              vm.$router.go(-2)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  height: 100%;
  // background: #f6f8f9;
  > .top {
    height: auto;
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    > img {
      width: 50px;
      height: 50px;
      margin: 0 15px 0 20px;
    }
    > div {
      height: 50px;
      width: 230px;
      > span {
        font-size: 13px;
      }
    }
  }
  > .select {
    display: flex;
    height: 40px;
    width: 100%;
    background: #fff;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5%;
    border-bottom: 1px solid #f1f1f1;
    > span {
      font-size: 14px;
      color: #101010;
    }
    .picker {
      display: flex;
      align-items: center;

      > span {
        font-size: 12px;
        color: #9b9b9b;
      }
      > .icon {
        margin-bottom: 4px;
      }
    }
  }
  > .info {
    height: 70px;
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-bottom: 1px solid #f1f1f1;
    padding: 0 2.5%;
    font-size: 14px;
    > .top {
      display: flex;
      align-items: center;
      > p {
        color: #ff3737;
        margin-left: 10px;
      }
    }
    .bottom {
      font-size: 12px;
      color: #9c9c9c;
      margin-top: 10px;
    }
  }
  > .input-box {
    width: 100%;
    background: #fff;
    display: flex;
    align-items: flex-start;
    padding: 15px 2.5% 0;
    border-bottom: 1px solid #f1f1f1;
    > span {
      font-size: 14px;
      line-height: 14px;
      color: #101010;
    }
    > .input {
      font-size: 12px;
      margin-left: 8px;
      color: #9a9a9a;
      width: 280px;
    }
  }
  .uplode {
    margin-top: 15px;
    width: 100%;
    background: #fff;
    font-size: 14px;
    padding: 0 2.5%;
    display: flex;
    align-items: center;
    span {
      margin-right: 15px;
    }
    > div {
      width: 45px;
      height: 45px;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px dotted #ff3737;
      margin: 15px 15px 0 0;
      > img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
      > .svg {
        width: 80%;
        height: 80%;
      }
    }
  }
  .btn {
    width: 95%;
    margin: 50px auto;
    height: 45px;
    font-size: 14px;
    color: #fff;
    line-height: 45px;
    border-radius: 25px;
    background: linear-gradient(to right, $new-red-tint, $new-red-dark);
  }
}
</style>
